<template>
	<view class="cashier" style="justify-content: start;">
		<view class="cashier-con">

			<view class="cashier-view" style="margin: 0;">
				<text v-if="type != 2">应付金额</text>
				<text v-else>应付积分</text>
				<text :class="[type == 2 ? '' : 'price']">{{ blance.pay_price }}</text>
			</view>
			<view class="payType" v-if="type != 2">
				<view class="payType-list" @tap="radioChange(1)">
					<view class="payType-text">
						<image mode="widthFix" src="/static/image/index/add_images/yl.png"></image>
						<span style="margin-left: 10rpx;">汇付-快捷支付</span>
					</view>
					<view>
						<radio value="1" :checked="radioVal == 1 ? true : false"
							:color="radioVal == 1 ? '#FF2842' : ''" />
					</view>
				</view>
			 
				<!-- <text class="payType-xia"></text> -->
				<!-- <view class="payType-list" @tap="radioChange(2)">
					<view class="payType-text">
						<image mode="widthFix" :src="Url + 'add_images/sc-yue.png'"></image>
						余额支付
						<text>(可用￥{{ blance.balance }})</text>
					</view>
					<view>
						<radio
							:style="{ opacity: blance.balance >= blance.pay_price ? '' : '0.3' }"
							value="2"
							:checked="radioVal == 2 ? true : false"
							:color="radioVal == 2 ? '#FF2842' : ''"
						/>
					</view>
				</view> -->
			</view>
			<view class="payType" v-else>
				<view class="payType-list" @tap="radioChange(3)">
					<view class="payType-text">
						<image mode="widthFix" :src="Url + 'add_images/ic-int.png'"></image>
						积分支付
						<text>(可用{{ blance.integral }}积分)</text>
					</view>
					<view>
						<radio value="3" :checked="radioVal == 3 ? true : false"
							:color="radioVal == 3 ? '#FF2842' : ''" />
					</view>
				</view>
			</view>
		</view>
		<view class="" style="display: flex;">
					<button class="cashier-btn" :loading="loading" @tap="topay(2)" style="margin-top: 70rpx;margin-right: 40rpx;background-color: white;color: #ff2842;border: 1rpx solid #ff2842;">找人代付</button>
			<button class="cashier-btn" :loading="loading" @tap="topay(1)" style="margin-top: 70rpx;">立即支付</button>
	
		</view>

		<shop-loading v-if="shopLoad"></shop-loading>
		<view class="">
			<uni-popup ref="popup" background-color="#fff">
				<view class="" style="padding: 0 30rpx;">
					<view class="" style="background-color: white;border-radius: 16rpx;height: 338rpx;padding: 30rpx;">
						<view class="" style="position: relative;">
							<view class="" style="text-align: center;font-size: 28rpx;">
								找人代付
							</view>
							<image src="/static/image/login/close.png" @click="closePop"
								style="width: 16rpx;height: 16rpx;position: absolute;right: 10rpx;top: 10rpx;" mode="">
							</image>
						</view>
						<view class="" style="margin-top: 22rpx;font-size: 24rpx;">
							代付链接：
						</view>
						<view class="" style="margin-top: 30rpx;">
							<view class="" style="display: flex;align-items: center;justify-content: space-between;">
								<view class=""
									style="width: 480rpx;height: 68rpx;display: flex;align-items: center;padding: 18rpx 24rpx;background-color: #EDEDED;border-radius: 10rpx;font-size: 24rpx;overflow: hidden;white-space: nowrap;">
									 {{urls}}
								</view>
								<view class="" @click="copy"
									style="width: 140rpx;height: 68rpx;border-radius: 10rpx;background-color: #FF4D62;color: white;font-size: 24rpx;display: flex;justify-content: center;align-items: center;margin-left: 20rpx;">
									复制
								</view>
							</view>
						</view>
						<view class="" style="margin-top: 40rpx;font-size: 24rpx;">
							请复制代付链接发送给好友~
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		cashierTotal,
		payDo,
		customPay
	} from '@/common/index.js';
	
		import url_config from '@/common/config.js';
	import {
		debounce
	} from '@/static/js/utils.js';
	export default {
		data() {
			return {
				Url: this.Imgurl,
				radioVal: 1,
				type: 1,
				loading: false,
				id: 0,
				blance: {},
				shopLoad: true,
				opsData: {}, //拼团团id
				state: '', //1是支付2是代付
				Info: {
					price: '',
					type: 1
				},
				urls:""
			};
		},
		onLoad(ops) {
			// console.log(ops)

			let data = JSON.parse(ops.data);
			 console.log(data)

			this.opsData = data;
			this.type = data.type;
			this.id = data.order_id;
			this.state = data.state
			this.cashierTotal();
			this.radioVal = data.type != 2 ? 1 : 3
		},
		methods: {
			cashierTotal() {
				const {
					id,
					type
				} = this;
				this.shopLoad = true;
				cashierTotal({
					id,
					type
				}).then(res => {
					if (res.code == 1) {
						this.blance = res.msg;
						this.blance.balance = +res.msg.balance;
						this.blance.pay_price = +res.msg.pay_price;
						this.shopLoad = false;
					} else {
						this.shopLoad = false;
					}
				});
			},
			radioChange(type) {
				this.radioVal = type;
				// if (type == 2) {
				// 	if (this.blance.balance >= this.blance.pay_price) {
				// 		this.radioVal = type;
				// 	}
				// } else {
				// 	this.radioVal = type;
				// }
			},
			//微信调起支付
			wePay(params) {
				payDo(params)
					.then(res => {
						if (res.code == 1) {
							// this.toast(res.msg)
							if (!uni.getSystemInfoSync().version) {
								this.h5pay(res.msg, params);
							} else {
								this.wechatPay(res.msg, params);
							}
						}
					})
					.catch();
			},
			//支付
			topay(state){
				this.state = state;
					//tpye 1是立即支付 2是代付
					// if (this.state == 1) {
						 
					// 	//立即支付
					// 	payDo(this.Info).then((res)=>{
					// 		if(res.code == 1){
					// 			console.log(res);
					// 		}
					// 	})
					// } else {
					// 	//代付
						 
					// 	this.urls = url_config + 'h5/pageB/cashierDesk/cashierDesk2?order_id=' + this.id
					// 	this.$refs.popup.open()
					// 	uni.navigateTo({
					// 		url: '/pageB/cashierDesk/cashierDesk2?order_id=' + this.id
					// 	})
					// }
					if(this.state == 2){
						//代付
							this.urls = url_config + 'h5/pageB/cashierDesk/cashierDesk2?order_id=' + this.id
							this.$refs.popup.open()
							// uni.navigateTo({
							// 	url: '/pageB/cashierDesk/cashierDesk2?order_id=' + this.id
							// })
							return;
					}
					const {
						radioVal,
						id,
						type,
						opsData
					} = this;
					let version = uni.getSystemInfoSync().version ? 1 : 2;
					const versionFlag = uni.getSystemInfoSync().version;
					let params = {
						id,
						type,
						pay_type: radioVal == 3 ? 2 : radioVal,
						version
					};
					//快捷支付
					if (radioVal == 1) {
						let faildata = JSON.stringify(params);
						uni.showModal({
							title: '支付',
							content: '确定支付吗?',
							success: res => {
								if (res.confirm) {
									payDo(params)
										.then(res => {
											if (res.code == 1) {
												 
												//支付发起成功
												window.location.href = res.msg;
												// if (type != 3) {
												// 	uni.reLaunch({
												// 		url: '/pageD/pay-Success/pay-Success?payType=1&type=' +
												// 			type
												// 	});
												// } else {
												// 	if (!versionFlag) {
												// 		window.location.href =
												// 			'https://shop.jyecloud.cn/h5/pageB/groupTuxedo/groupTuxedo?id=' +
												// 			opsData.user_assemble_id + '&type=' +
												// 			type;
												// 	} else {
												// 		uni.reLaunch({
												// 			url: '/pageB/groupTuxedo/groupTuxedo?id=' +
												// 				opsData.user_assemble_id +
												// 				'&type=' + type
												// 		});
												// 	}
												// }
											}
										})
										.catch();
								} else if (res.cancel) {
									let lo = JSON.stringify(opsData)
									// console.log(lo,faildata)
									uni.reLaunch({
										url: '/pageD/pay-Success/pay-Success?payType=2&data=' +
											faildata + '&canData=' + lo
									});
								}
							}
						});
					} else {
						this.toast('不是快捷支付');
						//this.wePay(params);
					}
				},
			
			
			
			
// 			debounce(function() {
// 					//tpye 1是立即支付 2是代付
// 					// if (this.state == 1) {
						 
// 					// 	//立即支付
// 					// 	payDo(this.Info).then((res)=>{
// 					// 		if(res.code == 1){
// 					// 			console.log(res);
// 					// 		}
// 					// 	})
// 					// } else {
// 					// 	//代付
						 
// 					// 	this.urls = url_config + 'h5/pageB/cashierDesk/cashierDesk2?order_id=' + this.id
// 					// 	this.$refs.popup.open()
// 					// 	uni.navigateTo({
// 					// 		url: '/pageB/cashierDesk/cashierDesk2?order_id=' + this.id
// 					// 	})
// 					// }
// 					if(this.state == 2){
// 						//代付
// 							this.urls = url_config + 'h5/pageB/cashierDesk/cashierDesk2?order_id=' + this.id
// 							this.$refs.popup.open()
// 							uni.navigateTo({
// 								url: '/pageB/cashierDesk/cashierDesk2?order_id=' + this.id
// 							})
// 							return;
// 					}
// 					const {
// 						radioVal,
// 						id,
// 						type,
// 						opsData
// 					} = this;
// 					let version = uni.getSystemInfoSync().version ? 1 : 2;
// 					const versionFlag = uni.getSystemInfoSync().version;
// 					let params = {
// 						id,
// 						type,
// 						pay_type: radioVal == 3 ? 2 : radioVal,
// 						version
// 					};
// 					if (radioVal != 1) {
// 						let faildata = JSON.stringify(params);
// 						uni.showModal({
// 							title: '支付',
// 							content: '确定支付吗?',
// 							success: res => {
// 								if (res.confirm) {
// 									payDo(params)
// 										.then(res => {
// 											if (res.code == 1) {
// 												this.toast(res.msg);
// 												//支付发起成功
// 												if(this.state == 1){
// 													//支付
													
// 												}else{
// 													//代付
// 												}
// 												// if (type != 3) {
// 												// 	uni.reLaunch({
// 												// 		url: '/pageD/pay-Success/pay-Success?payType=1&type=' +
// 												// 			type
// 												// 	});
// 												// } else {
// 												// 	if (!versionFlag) {
// 												// 		window.location.href =
// 												// 			'https://shop.jyecloud.cn/h5/pageB/groupTuxedo/groupTuxedo?id=' +
// 												// 			opsData.user_assemble_id + '&type=' +
// 												// 			type;
// 												// 	} else {
// 												// 		uni.reLaunch({
// 												// 			url: '/pageB/groupTuxedo/groupTuxedo?id=' +
// 												// 				opsData.user_assemble_id +
// 												// 				'&type=' + type
// 												// 		});
// 												// 	}
// 												// }
// 											}
// 										})
// 										.catch();
// 								} else if (res.cancel) {
// 									let lo = JSON.stringify(opsData)
// 									// console.log(lo,faildata)
// 									uni.reLaunch({
// 										url: '/pageD/pay-Success/pay-Success?payType=2&data=' +
// 											faildata + '&canData=' + lo
// 									});
// 								}
// 							}
// 						});
// 					} else {
// 						this.wePay(params);
// 					}
// 				}, 500)
// ,
			
			//复制
			copy(){
				uni.setClipboardData({
					data:this.urls,
					
				})
			},
			//关闭弹窗
			closePop(){
				this.$refs.popup.close()
			},
			wechatPay(params, item) {
				this.loading = true;
				const {
					type,
					opsData
				} = this;
				let faildata = JSON.stringify(item);
				const versionFlag = uni.getSystemInfoSync().version;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: params.timeStamp,
					nonceStr: params.nonceStr,
					package: params.package,
					signType: params.signType,
					paySign: params.paySign,
					success: res => {
						this.loading = false;
						console.log(res);
						if (type != 3) {
							uni.reLaunch({
								url: '/pageD/pay-Success/pay-Success?payType=1&type=' + type
							})
						} else {
							let lo = JSON.stringify(opsData)
							if (!versionFlag) {
								window.location.href =
									'https://shop.jyecloud.cn/h5/pageB/groupTuxedo/groupTuxedo?id=' + opsData
									.user_assemble_id + '&type=' + type
							} else {
								uni.reLaunch({
									url: '/pageB/groupTuxedo/groupTuxedo?id=' + opsData
										.user_assemble_id + '&type=' + type
								});
							}
							// uni.reLaunch({
							// 	url: '/pageB/groupTuxedo/groupTuxedo?data='+lo
							// });
						}
					},
					fail: err => {
						this.loading = false;
						let lo = JSON.stringify(opsData)
						uni.reLaunch({
							url: '/pageD/pay-Success/pay-Success?payType=2&data=' + faildata +
								'&canData=' + lo
						});
						// console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			h5pay(params, item) {
				this.loading = true;
				const {
					type,
					opsData
				} = this;
				let faildata = JSON.stringify(item);
				console.log(params);
				const versionFlag = uni.getSystemInfoSync().version;
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: params.appId, //公众号名称，由商户传入
						timeStamp: params.timeStamp, //时间戳，自1970年以来的秒数
						nonceStr: params.nonceStr, //随机串
						package: params.package,
						signType: params.signType, //微信签名方式：
						paySign: params.paySign //微信签名
					},
					res => {
						if (res.err_msg == 'get_brand_wcpay_request:ok') {
							this.loading = false;
							if (type != 3) {
								uni.reLaunch({
									url: '/pageD/pay-Success/pay-Success?payType=1&type=' + type
								})
							} else {
								let lo = JSON.stringify(opsData)
								if (!versionFlag) {
									window.location.href =
										'https://shop.jyecloud.cn/h5/pageB/groupTuxedo/groupTuxedo?id=' + opsData
										.user_assemble_id + '&type=' + type
								} else {
									uni.reLaunch({
										url: '/pageB/groupTuxedo/groupTuxedo?id=' + opsData.user_assemble_id +
											'&type=' + type
									});
								}
							}

							//var url = window.location.host;
							//location.href = "https://" + url + "/h5/pages/order/index";
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						} else {
							this.loading = false;
							let lo = JSON.stringify(opsData)
							uni.reLaunch({
								url: '/pageD/pay-Success/pay-Success?payType=2&data=' + faildata +
									'&canData=' + lo
							});
						}
					}
				);
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss">
	uni-page-body {
		-webkit-overflow-scrolling: touch;
		height: 100%;
		background: white;
		width: 100%;
		font-size: 15px;
		font-family: NotoSansHans-Bold;
		color: #333;
		overflow-x: hidden;
	}

	.cashier {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;

		&-btn {
			width: calc(100% - 30upx);
			margin: 30upx auto;
			display: block;
			padding: 5px 0;
			border-radius: 10upx;
			font-size: 32upx;
			color: #ffffff;
			background-color: #ff2842;

			&::after {
				border: none;
			}
		}

		&-view {
			width: 100%;
			padding: 81upx 0;
			box-sizing: border-box;
			background-color: #ffffff;
			margin: 20upx 0;

			text {
				display: block;
				text-align: center;
				font-size: 36upx;
				color: #333333;
				margin-bottom: 30upx;

				&:last-child {
					font-size: 50upx;
					font-weight: bold;
				}

				&.price {
					&::before {
						content: '￥';
						font-size: 40upx;
					}
				}
			}
		}

		.payType {
			width: 100%;
			background-color: #ffffff;
			margin: 0 auto;

			.payType-xia {
				height: 2upx;
				width: 90%;
				background-color: #f9f9f9;
				display: block;
				margin: 0 auto;
			}

			.payType-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 26upx;
				box-sizing: border-box;

				.payType-text {
					font-size: 28upx;
					color: #333333;
					display: flex;
					align-items: center;

					image {
						width: 36upx;
						height: 36upx;
						margin-right: 10upx;
					}

					text {
						font-size: 20upx;
						color: #999999;
					}
				}

				/deep/ {
					uni-radio .uni-radio-input {
						-webkit-appearance: none;
						appearance: none;
						margin-right: 5px;
						outline: 0;
						border: 1px solid #d1d1d1;
						background-color: #fff;
						border-radius: 50%;
						width: 36upx;
						height: 36upx;
						position: relative;
					}
				}
			}
		}
	}
</style>